{% extends 'layout.html' %}
{% block content %}
    <h5 class="font-weight-bold">Images</h5>
    <div class="border-top pt-3"></div>
    <!--Top Action Buttons-->
    <button type="button" class="btn btn-info btn-sm float-right m-1">Add Images</button>
    <button type="button" class="btn btn-danger btn-sm float-right m-1">Remove All</button>
    <button type="button" class="btn btn-secondary btn-sm m-1">
        Images <span class="badge badge-light">{{ image_count }}</span>
        <span class="sr-only">unread messages</span>
    </button>
    <a href="{{ url_for('images') }}">
        <button type="button" class="btn btn-warning btn-sm m-1"><span class="fas fa-refresh mb-1"></span> Refresh
        </button>
    </a>

    <!--Table Start-->
    <table class="table table-sm mt-4">
        <thead class="thead-light">
        <tr>
            <th scope="col">Image Id</th>
            <th scope="col">Repository</th>
            <th scope="col">Created</th>
            <th scope="col">Size</th>
            <th scope="col">Action</th>
            <th scope="col">Details</th>
        </tr>
        </thead>
        <tbody>
        {% if image_count > 0 %}
            {% for i in docker_image %}
                <tr>
                    <td>{{  i['Id'][7:19] }}</td>
                    <td>{{ i['RepoTags'][0] }}</td>
                    <td>{{ i['Created'] }}</td>
                    <td>{{ i['Size'] }}</td>
                    <td><a href="{{ url_for('delete_image',image_id=i['Id'][7:19]) }}"
                           class="badge badge-danger">Delete</a></td>
                    <td><a href="#">View</a></td>
                </tr>
            {% endfor %}
        {% else %}
            <tr>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
            </tr>
        {% endif %}
        </tbody>
    </table>
    <div class="border-top pt-3"></div>
{% endblock content %}